<template>
  <div class="page-container">
    <el-tabs type="border-card">
      <el-tab-pane label="position: sticky粘性定位实现">
        <div class="container-box">
          <div class="bar bar1">导航栏</div>
          <p v-for="(item, index) in 50" :key="index + Math.random()">这里是重复文本！</p>
        </div>
        <p>注意：</p>
        <p>sticky 粘性定位的原理 是结合了 relative 相对定位 和 fixed 固定定位 的特点，</p>
      </el-tab-pane>
      <el-tab-pane label="监听页面滚动条事件 改变 定位状态实现">
        <div ref="box2" class="container-box" @scroll="onScroll">
          <div ref="bar" class="bar">导航栏</div>
          <p v-for="(item, index) in 50" :key="index + Math.random()">这里是重复文本！</p>
        </div>
        <p>注意：</p>
        <p>浏览器对sticky支持不友好，所以可以通过 监听滚动条的 scroll 事件，当滚动距离 等于 0 时，将position 设置成 relative 相对定位，当滚动距离 大于 0 时，将position 设置成 fixed 固定定位，从而实现吸顶效果。</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'CeilingBar', // 导航栏吸顶
  data() {
    return {
      isCeiling: false
    };
  },
  methods: {
    onScroll() {
      const { box2, bar } = this.$refs;
      const scrollTop = box2.scrollTop || 0;
      if (scrollTop > 0) {
        bar.style.position = 'absolute';
        bar.style.top = `${scrollTop + 10}px`;
      } else {
        bar.style.position = 'relative';
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';
.container-box {
  position: relative;
  width: 100%;
  height: 400px;
  border: 5px solid rgb(111, 41, 97);
  padding: 10px;
  overflow-y: auto;
  box-sizing: border-box;
  .bar {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: $light-blue;
    color: #fff;
  }
  .bar1 {
    position: sticky;
    top: 0;
  }
}
</style>
